<template>
  <div class="line-left-index" id="lineLeft">
    <p @click="twoZero" class="two">2020</p>
    <span @click="twoOne">2021</span>
  </div>
</template>

<script>
export default {
  mounted() {
    this.drawLineLeft();
  },
  methods: {
    drawLineLeft() {
      var myChart = this.$echarts.init(document.getElementById("lineLeft"));
      var yearData = [
        {
          year: "2020",
          data: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 181, 321, 290, 330, 310, 124, 180, 200, 180, 79],
          ],
        },
        {
          year: "2021",
          data: [
            [123, 170, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34],
          ],
        },
      ];
      var option = {
        // 改变两条线的颜色
        color: ["#00f2f1", "#ed3f35"],

        tooltip: {
          trigger: "axis",
        },
        // x y 里面有data的时候   这里面的可以删掉
        legend: {
          // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
          // 距离容器10%  上面的图例文字  加引号
          right: "10%",
          // 修饰图例文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          // 四周的额颜色
          borderColor: "#012f4a",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          //分割线 水平方向的分割线
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            // 可以让我们的线带有弧度
            smooth: true,
            data: yearData[0].data[0],

            // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1],
            // data:   [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    twoZero() {
      console.log(2020)
    },
    twoOne() {
      console.log(2021)

    },
  },
};
</script>

<style>
.line-left-index {
  width: 100%;
  height: 100%;
}

</style>
